<template>
  <!-- 文件校验通过但是编码重复 -->
  <div class="validate-box">
    <!-- 修改编码 -->
    <div class="file-status repeat" v-if="repeated && !isCoverable">
      <span class="icon aufontAll warning">&#xe99a;</span>
      <span class="file-status-txt">检测到编码重名，修改后导入将生成新的业务模型</span>
    </div>

    <a-tabs :activeKey="tabKey" @tabClick="tabClick">
      <!-- codeList一直会有但是只有存在重复时repeat才会为真 -->
      <a-tab-pane key="1" v-if="list.codeList.length !== 0 && repeated && !isCoverable">
        <span slot="tab">
          模型<i style="color: red;">*</i>
        </span>

        <a-table :pagination="false" :columns="codeColumns" :data-source="list.codeList">
          <template slot="newCode" slot-scope="text, record">
            <div class="model-item">
              <a-input
                :placeholder="$t('languages.Apps.PlzFillInDataModelCode')"
                v-model="record.newCode"
                :maxLength="24"
                @change="inputChange"></a-input>
            </div>
          </template>
        </a-table>
      </a-tab-pane>

      <a-tab-pane key="2" v-if="list.sheetList.length !== 0 && repeated && !isCoverable">
        <span slot="tab">
          子表<i style="color: red;">*</i>
        </span>
        <a-input
          placeholder="请输入子表名称"
          class="input-search"
          v-model="searchSubCodeText"
          @pressEnter="getSubCodeItem"
          style="width: 260px;margin-bottom: 8px;"
        >
          <a-icon
            class="suffix-icon close-icon"
            v-if="searchSubCodeText.length > 0 "
            slot="suffix"
            type="close-circle"
            @click="clearSubCodeText"
          />
          <a-icon
            class="suffix-icon"
            type="search"
            slot="suffix"
            @click="getSubCodeItem"
          />
        </a-input>
        <a-table :pagination="false" :columns="sheetColumns" :data-source="getSubCodeItem()">
          <template slot="newCode" slot-scope="text, record">
            <div class="model-item">
              <a-input
                :placeholder="$t('languages.Apps.PlzFillInSubsheetCode')"
                v-model="record.newCode"
                :maxLength="28"
                @change="inputChange"></a-input>
            </div>
          </template>
        </a-table>
      </a-tab-pane>

      <a-tab-pane key="3" force-render v-if="list.bizFormsList.length !== 0">
        <span slot="tab">
          表单
        </span>
        <a-input
          placeholder="请输入表单名称"
          class="input-search"
          v-model="searchFormModelText"
          @pressEnter="getFormModelItem"
          style="width: 260px;margin-bottom: 8px;"
        >
          <a-icon
            class="suffix-icon close-icon"
            v-if="searchFormModelText.length > 0 "
            slot="suffix"
            type="close-circle"
            @click="clearKeyword"
          />

          <a-icon
            class="suffix-icon"
            type="search"
            slot="suffix"
            @click="getFormModelItem"
          />
        </a-input>
        <a-table :pagination="false" :columns="bizFormsColumns" :data-source="getFormModelItem()">
          <template slot="newCode" slot-scope="text, record">
            <a-input type="text" 
              v-model="record.newCode" 
              placeholder="请输入" 
              :maxLength="24"
              @change="inputChange"/>
          </template>
        </a-table>
      </a-tab-pane>

      <a-tab-pane key="4" v-if="list.workflowsList.length !== 0">
        <span slot="tab">
          流程
        </span>
        <a-table :pagination="false" :columns="workflowsColumns" :data-source="list.workflowsList">
          <template slot="newCode" slot-scope="text, record">
            <a-input type="text" 
              v-model="record.newCode" 
              placeholder="请输入"
              :maxLength="28"
              @change="inputChange"/>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts">
import { Icon, Input } from "@h3/antd-vue";
import {
  Component, Prop, Vue
} from 'vue-property-decorator';


@Component({
  name: 'updateCode',
  components: {
    AIcon: Icon,
    AInput: Input
  }
})

export default class UpdateCode extends Vue {
  @Prop() list !: any;

  @Prop() repeated !: any;   //记录模型是否重复

  @Prop() isCoverable!: any;

  mounted() {
    let subLen = this.list.sheetList.length
    let formLen = this.list.bizFormsList.length
    let workflowLen = this.list.workflowsList.length
    if(this.repeated && !this.isCoverable) {
      this.tabKey = '1'
    } else if (subLen > 0) {
      this.tabKey = '2'
    } else if (formLen > 0) {
      this.tabKey = '3'
    } else if (workflowLen > 0) {
      this.tabKey = '4'
    }

    this.list.bizFormsList.forEach((el:any) => {
      el.newCode = el.code
    })
  }

  tabKey: string = '1';

   sheetColumns:any[] = [
    {
      title: '子表',
      key: 'name',
      dataIndex: 'name'
    },
    {
      title: '原编码',
      key: 'code',
      dataIndex: 'code'
    },
    {
      title: '新编码',
      key: 'newCode',
      dataIndex: 'newCode',
      scopedSlots: { customRender: 'newCode' },
    }
  ]

  codeColumns: any[] = [
    {
      title: '模型',
      key: 'name',
      dataIndex: 'name'
    },
    {
      title: '原编码',
      key: 'code',
      dataIndex: 'code'
    },
    {
      title: '新编码',
      key: 'newCode',
      dataIndex: 'newCode',
      scopedSlots: { customRender: 'newCode' },
    }
  ]

  bizFormsColumns:any[] = [
    {
      title: '表单',
      key: 'name',
      dataIndex: 'name'
    },
    {
      title: '原编码',
      key: 'code',
      dataIndex: 'code'
    },
    {
      title: '新编码',
      key: 'newCode',
      dataIndex: 'newCode',
      scopedSlots: { customRender: 'newCode' },
    }
  ]

  workflowsColumns:any[] = [
    {
      title: '流程',
      key: 'workflowName',
      dataIndex: 'workflowName'
    },
    {
      title: '原编码',
      key: 'workflowCode',
      dataIndex: 'workflowCode'
    },
    {
      title: '新编码',
      key: 'newCode',
      dataIndex: 'newCode',
      scopedSlots: { customRender: 'newCode' },
    }
  ]

  searchSubCodeText:string = ''
  getSubCodeItem(){
    return this.list.sheetList.filter(el => el.name.indexOf(this.searchSubCodeText) > -1)
  }

  clearSubCodeText(){
    this.searchSubCodeText = '';
    this.getSubCodeItem();
  }

  searchFormModelText:string = ''
  getFormModelItem(){
    return this.list.bizFormsList.filter(el => el.name.indexOf(this.searchFormModelText) > -1)
  }

  clearKeyword(){
    this.searchFormModelText = '';
    this.getFormModelItem();
  }

  // 切换tab
  tabClick(val){
    this.tabKey = val
  }

  getCodeList() {
    let existEmptyModelcode:boolean = false;
    let existEmptySubCode:boolean = false;
    let existValidModelcode:boolean = false;
    let existValidSubCode:boolean = false;

    if (this.list.codeList.length > 0) { // 模型
      existEmptyModelcode = this.list.codeList.some((item:any) => !item.newCode);
      existValidModelcode = this.list.codeList.some((item:any) => !/^[a-zA-Z][a-zA-Z0-9_]{0,23}$/.test(item.newCode));
    }

    if (this.list.sheetList.length > 0) { // 子表
      existEmptySubCode = this.list.sheetList.some((item:any) => !item.newCode);
      existValidSubCode = this.list.sheetList.some((item:any) => !/^[a-zA-Z][a-zA-Z0-9_]{0,27}$/.test(item.newCode));
    }

    if (existEmptyModelcode || existEmptySubCode) {
      let type = ''
      if(existEmptyModelcode){
        this.tabKey = '1'
        type = '模型'
      }else {
        this.tabKey = '2'
        type = '子表'
      }
      this.$message.error(type + '新编码不能为空')
      return null;
    }

    if(existValidModelcode || existValidSubCode) {
      let type = ''
      if(existValidModelcode){
        this.tabKey = '1'
        type = '模型'
      }else {
        this.tabKey = '2'
        type = '子表'
      }

      this.$message.error(type + `编码格式必须以字母开头不超过${existValidModelcode ? 24 : 28}个字符，仅支持字母、数字、下划线`);
      return null;
    }
    return this.list;
  }

  inputChange() {
    this.$emit('inputChange', this.list)
  }
}
</script>

<style scoped>
  .warning {
    color: #f59a23;
    margin-right: 6px;
  }
</style>